﻿<%@ Page Language="C#" MasterPageFile="~/ActivitySystemPopUpPage.Master" AutoEventWireup="true" CodeBehind="Host.aspx.cs" Inherits="ActivitySystem.Web.Activity.Host" %>

<asp:Content ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .div_contant {
            width: 900px;
        }

        .div_contant_head .sp_head {
            font-size: 20px;
            background-color: #4b6c9e;
            color: White;
            width: auto;
            padding-left: 10px;
            padding-right: 10px;
        }

        .div_contant_detail {
            border-style: solid;
            border-color: #4c6c9e;
            border-width: 2px;
            padding: 5px;
            margin-bottom: 5px;
        }

            .div_contant_detail span {
                display: -moz-inline-box;
                display: inline-block;
                width: 80px;
            }

            .div_contant_detail ul li {
                margin-bottom: 5px;
            }

                .div_contant_detail ul li input {
                    width: 70%;
                }

            .div_contant_detail .activity_description {
                width: 95%;
                height: 200px;
            }

            .div_contant_detail .bigbox {
                width: 100px;
                height: 50px;
            }

            .div_contant_detail .smallbox {
                width: 100px;
                height: 20px;
            }
    </style>
    <link rel="stylesheet" href="../Styles/JQueryUI.css" />
    <link rel="stylesheet" href="../Styles/JQueryUI.Timepicker.css" />
    <script type="text/javascript" src="../Scripts/JQuery.js"></script>
    <script type="text/javascript" src="../Scripts/JQueryUI.js"></script>
    <script type="text/javascript" src="../Scripts/JQueryUI.Timepicker.js"></script>
    <script type="text/javascript">
        $(function () {
            var list = $.parseJSON($("#available-types").text());

            $(".activity-type").autocomplete({
                autoFocus: true,
                minLength: 0,
                source: function (request, response) {
                    var term = request.term.split(/[,;]\s*/).pop().trim();
                    if (!term) {
                        response(list);
                        return;
                    }

                    list = $.grep(list, function (item) {
                        return item.toUpperCase().indexOf(term.toUpperCase()) >= 0;
                    });

                    response(list);
                },
                focus: function () {
                    return false;
                },
                select: function (event, ui) {
                    var terms = this.value.split(/[,;]\s*/);
                    terms.pop();
                    terms.push(ui.item.value);
                    this.value = terms;
                    return false;
                }
            }).focus(function () {
                $(this).autocomplete("search");
            });
        });

        $(function () {
            var users = [];

            $(".invite-box").autocomplete({
                autoFocus: true,
                minLength: 2,
                source: function (request, response) {
                    var term = request.term.split(/[,;]\s*/).pop().trim();
                    if (!term || term.length < 2) {
                        return;
                    }

                    $.getJSON("UserSearch.aspx?UserName=" + term, function (data) {
                        users.length = 0;
                        $(data).each(function (i, item) {
                            users.push(item);
                        });
                    });

                    response(users);
                },
                focus: function () {
                    return false;
                },
                select: function (event, ui) {
                    users.length = 0;
                    var terms = this.value.split(/[,;]\s*/);
                    terms.pop();
                    terms.push(ui.item.value);
                    this.value = terms;
                    return false;
                }
            });
        });

        $(function () {
            $(".pick-date").datetimepicker();
        });
    </script>
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <span style="visibility: hidden; display: none" id="available-types">[
        <asp:Repeater ID="rptAvailableActivityTypes" runat="server">
            <ItemTemplate>"<%#Eval("Name") %>"</ItemTemplate>
            <SeparatorTemplate>,</SeparatorTemplate>
        </asp:Repeater>
        ]
    </span>
    <asp:ScriptManager ID="scriptManager" runat="server" />
    <asp:UpdatePanel ID="updatePanel" runat="server">
        <ContentTemplate>
            <div class="div_contant">
                <div class="div_contant_head">
                    <span class="sp_head">HOST ACTIVITY</span>
                </div>
                <div class="div_contant_detail">
                    <ul>
                        <li><span>Title:</span><asp:TextBox ID="tbxTitle" runat="server" /></li>
                        <li><span>Type:</span><asp:TextBox ID="tbxActivityType" CssClass="activity-type" runat="server" /></li>
                        <li><span>Description:</span><asp:TextBox ID="tbxDescription" TextMode="MultiLine" CssClass="activity_description" runat="server" /></li>
                        <li><span>Start Time:</span><asp:TextBox ID="tbxStartTime" CssClass="pick-date" runat="server" /></li>
                        <li><span>End Time:</span><asp:TextBox ID="tbxEndTime" CssClass="pick-date" runat="server" /></li>
                    </ul>
                </div>
            </div>
            <div class="div_contant">
                <div class="div_contant_head">
                    <span class="sp_head">INVITE</span>
                </div>
                <div class="div_contant_detail">
                    <asp:CheckBox ID="chkIsPublic" runat="server" Text="Is Public (If unchecked, then only the invited people can join!)" Checked="true" />
                    <ul>
                        <li>
                            <span>Invite:</span><asp:TextBox ID="tbxInvite" CssClass="invite-box" runat="server" />
                        </li>
                    </ul>
                </div>
            </div>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>
